<template>
  <el-dialog align-center draggable title="编辑数据" v-model="isShow" width="60%">
    <FormCreate :option="options" :rule="formRules" @submit="submitData" v-model:api="fApi"></FormCreate>
    <div class="flex justify-end">
      <el-button @click="submitData" type="primary">提交</el-button>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
  import { nextTick, ref } from "vue";
  import formCreate from "@form-create/element-ui";
  import { formGlobalOption } from "@/components/FormCreate/global";
  import { UserAccount } from "../columns/data";
  import { GetUpdateFormRule } from "../columns/resetUpdate";
  import { requestUserAccountUpdate } from "@/api/modules/userAccount";
  import { ResultData } from "@/api/interface";
  import { RespOk } from "@/constant/codes";
  import { ElMessage } from "element-plus";
  import UpdateColumnsData

  = UserAccount.UpdateColumnsData;

  let emits = defineEmits(["reload"]);

  //获取表单规则
  const FormCreate = formCreate.$form(); //获取 formCreate 组件
  const fApi = ref(); //文档：http://www.form-create.com/v3/instance.html
  let options: any = formGlobalOption;
  let formRules = ref(GetUpdateFormRule(UpdateColumnsData));

  //提交按钮点击事件
  const submitData = () => {
    let formData = fApi.value.formData(); //获取表单数据
    fApi.value.validate((valid: any) => {
      if (valid === true || valid.length <= 0) {
        requestUserAccountUpdate(formData).then((res: ResultData<any>) => {
          if (res.code == RespOk) {
            ElMessage({ type: "success", message: "更新成功" });
            emits("reload");
            isShow.value = false;
          }
        });
      } else {
        ElMessage({ type: "error", message: "数据校验不通过" });
      }
    });


  };

  //以下是弹窗控制相关api
  let isShow = ref(false);
  const ShowPop = (row: any) => {
    isShow.value = true;
    nextTick(() => {
      //非第一次，通过api的形式
      fApi.value.resetFields();
      fApi.value.setValue(row);
    });
  };

  defineExpose({ ShowPop });
</script>

<style lang="scss" scoped></style>
